<script setup lang='ts'>
import * as echarts from 'echarts';
import { ref,onMounted,watch } from 'vue';

// 获取 dom 实例
const target = ref(null)
// echarts 实例变量
let myChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart()
})

const renderChart = () =>{
  const option = {
    // x轴展示数据
    xAxis: {
      show: false,  // 不显示轴
      type: 'value',  // 数据展示
      max: (value)=>{  // 最大值（防止触顶）
        return parseInt(value.max * 1.2)
      }
    },
    // y轴展示数据
    yAxis: {
      type: 'category',
      data: props.data.regions.map(item=>item.name),
      inverse: true, // 反转
      axisLabel:{
        color: '#9eb1c8' // 标签颜色
      },
      axisLine:{
        show: false // 不展示y轴的线
      },
      axisTick:{
        show: false // 不展示y轴的刻度
      }
    },
    // 图表绘制的样式
    gird:{
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: true // 包含刻度在内的区域
    },
    // 核心配置
    series: [
      {
        type: 'bar', // 柱状图
        data: props.data.regions.map(item=>({ // 数据
          name: item.name,
          value: item.value
        })),
        showBackground: true, // 展示背景
        backgroundStyle: {
          color: 'rgba(180,180,180,0.2)' // 背景颜色
        },
        itemStyle: {
          color: '#479AD3', // 柱状图颜色
          borderRadius: 5, // 圆角
          shadowColor : 'rgba(0,0,0,.3)', // 阴影颜色
          shadowBlur: 5 // 阴影模糊
        },
        barWidth: 12, // 柱状图宽度
        label:{
          show: true, // 展示标签
          position: 'right' , // 标签位置
          color: '#fff' // 标签颜色
        }
      }
    ]
  };

  myChart.setOption(option);
}

const props = defineProps({
  data:{
    type: Object,
    required: true
  }
})

watch(()=>props.data,()=>{
  renderChart()
})



</script>

<template>
  <div>
    <div>【地区数据总览】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>

</template>

<style scoped>

</style>